<template>
  <view>
    <!-- 详情子组件 -->
    <my-goods
      v-for="item in goodsList"
      :key="item.goods_id"
      :goods="item"
    ></my-goods>
  </view>
</template>
<script>
export default {
  data () {
    return {
      // 查询的参数
      queryObj: {
        query: '',
        cid: '',
        pagenum: 1, //页码
        pagesize: 10 //总条数
      },
      goodsList: [], //商品列表
      total: 0, //总条数
      isLoadingMore: false // 是否正在进行上拉加载
    }
  },
  onLoad (options) {
    console.log(options)
    this.queryObj.query = options.query || ''
    this.queryObj.cid = options.cid || ''

    // 调用api
    this.goodsListApi()
  },
  onPullDownRefresh () {
    // console.log('---onPullDownRefresh---')
    // 把页码设置为1，并且把数据清空
    this.queryObj.pagenum = 1
    this.goodsList = []

    // 重新发请求
    this.goodsListApi(true)
  },
  onReachBottom () {
    // 如果正在执行上拉加载更多，则return
    if (this.isLoadingMore) return
    // 判断是否还有下一页数据，如果有继续执行下面的代码，如果没有则提示并且return
    if (this.goodsList.length >= this.total) {
      uni.showToast({
        title: '没有更多数据啦~',
        icon: 'none',
        duration: 800
      })
      return
    }
    // 发请求
    // console.log('---onReachBottom---')
    this.queryObj.pagenum++
    this.goodsListApi()
  },
  methods: {
    async goodsListApi (isPullDown = false) {
      // 发送请求的时候把上拉加载设置true
      this.isLoadingMore = true
      const {
        meta: { status },
        message: { goods, total }
      } = await uni.$request({
        url: 'goods/search',
        data: this.queryObj,
        isPullDown
      })
      if (status === 200) {
        this.goodsList = [...this.goodsList, ...goods]
        this.total = total
        // 发送完关闭
        this.isLoadingMore = false
        // 如果是下拉刷新，数据回来了，则停止它默认的下拉刷新行为
        if (isPullDown) {
          uni.stopPullDownRefresh()
        }
      }
    }
  }
}
</script>
